<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
			:collection="collectionList">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data" style="width: 100%;">
				<uni-list>
					<uni-list-item v-for="(item, index) in data" :key="index" direction="column"
						@click="handleItemClick(item._id)">
						<template v-slot:header>
							<view class="header"
								style="display: flex;flex-direction: row;justify-content: space-between;">
								<view>
									{{timestampToDateString(item.ActivityDateTime_start)}}
								</view>
								<view>
									{{use_time_valuetotext[item.use_time]}}
								</view>
								<view>
									{{item.use_department}}
								</view>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-body"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 100%;">
								<view class="t">
									<text>
										{{item.ActivityName}}
									</text>
								</view>
								<view class="b">
									<button @click="add_yuyue(item)">再次预约</button>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<!-- <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" /> -->
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				use_time_valuetotext: {
					"0": "上午(09:00:12:00)",
					"1": "下午(14:00:15:00)"
				},
				collectionList: [db.collection('abu_activity_yuyue').field(
					'ActivityName,ActivityDateTime_start,use_time,use_position,use_department,use_people,user,user_phone,shenhe_advice,shehe_status,Notes'
				).getTemp(), db.collection('uni-id-users').field('username,_id').getTemp()],
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			add_yuyue(item) {
				uni.showModal({
					title: '提示',
					content: '是否再次预约',
					showCancel: true,
					cancelText: '取消',
					confirmText: '预约',
					success: res => {
						if (res.confirm) {
							console.log(item);
							var userId = item.user[0]._id;
							var currentTimestamp = Date.now(); // 获取当前时间戳
							item = {
								...item,
								user: item.user[0]._id,
								_id: `${userId}_${currentTimestamp}`
							}
							console.log(item);
							db.collection("abu_activity_yuyue").add(item).then(res => {
								uni.showToast({
									title: '预约成功',
									icon: 'none'
								});
								this.$refs.udb.loadData({
									clear: true
								})
							})

						} else {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			timestampToDateString(timestamp) {
				// 创建一个新的 Date 对象，使用传入的时间戳
				var date = new Date(timestamp);

				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 注意：月份从 0 开始，所以要加 1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();

				// 将结果拼接成正常的日期格式
				var dateString = year + '-' + this.addLeadingZero(month) + '-' + this.addLeadingZero(day);

				return dateString;
			},

			// 辅助函数，用于确保月份、日期、小时、分钟、秒数的两位数格式
			addLeadingZero(number) {
				if (number < 10) {
					return '0' + number;
				}
				return number;
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>